<template>
  <div class="workMateContent">
    <div class="workMateContent_box">
      <van-tabs v-model:active="active" title-active-color="#ff5000" line-height="0px" swipeable @click-tab="onClickTab">
        <van-tab v-for="(item, i) in arr" :key="i" :title="item.title" :name="item.type">
          <!-- <workMateList :ref="workMateLists+item.type" v-if="item.type !== 5" :type="item.type" />
          <topicList ref="topicLists" v-else /> -->
        </van-tab>
        <!-- <van-tab title="热榜" name="0">
          <workMateList ref="workMateLists0"  :type="0" />
        </van-tab>
        <van-tab title="话题"  name="5">
          <topicList ref="topicLists" />
        </van-tab>
        <van-tab title="聊工厂"  name="1">
          <workMateList  ref="workMateLists1" :type="1" />
        </van-tab>
        <van-tab title="晒工资"  name="2">
          <workMateList  ref="workMateLists2" :type="2" />
        </van-tab>
        <van-tab title="新鲜事"  name="3">
          <workMateList  ref="workMateLists3" :type="3" />
        </van-tab>
        <van-tab title="随手拍"  name="4">
          <workMateList  ref="workMateLists4" :type="4" />
        </van-tab> -->
      </van-tabs>
      <div>
        <workMateList ref="workMateLists" v-if="active !== 1" :type="type" />
        <topicList ref="topicLists" v-else />
      </div>
      
    </div>

    <div class="workMateContent_box_btn" @click="toSendPage(active)">发布</div>
  </div>
</template>

<script setup>
import topicList from '@/components/topicList.vue';
import workMateList from '@/components/workMateList.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const arr = ref([{ index: 0, type: 0, title: '热榜' }, { index: 1, type: 5, title: '话题' }, { index: 2, type: 1, title: '聊工厂' }, { index: 3, type: 2, title: '晒工资' }, { index: 4, type: 3, title: '新鲜事' }, { index: 5, type: 4, title: '随手拍' }])
const router = useRouter()
const active = ref(0)
const type = ref(0)
const workMateLists = ref(null)
// const workMateLists1 = ref(null)
// const workMateLists2 = ref(null)
// const workMateLists3 = ref(null)
// const workMateLists4 = ref(null)
const topicLists = ref()

const onClickTab = (e) => {
  console.log('e.name===='+e.name)
  type.value = e.name
  workMateLists.value.onRefresh()
  // active.value = e.name
  // switch (e.name) {
  //   case '0':
  //     return workMateLists0.value.onRefresh()
  //   case '1':
  //     return workMateLists1.value.onRefresh()
  //   case '2':
  //     return workMateLists2.value.onRefresh()
  //   case '3':
  //     return workMateLists3.value.onRefresh()
  //   case '4':
  //     return workMateLists4.value.onRefresh()
  //   case '5':
  //     return topicLists.value.onRefresh()
  //   default:
  //     return workMateLists0.value.onRefresh()
  // }
 
};
// 跳转到发布页
const toSendPage = (active) => {
  router.push({
    path: '/sendComment',
    query: {
      type: active,
      dynamicKeepAlive: 0
    }
  })
}
</script>

<style lang="scss" scoped>
.storeDetailsTab {
  border-top: .2667rem solid $color-bg;
}

:deep(.van-tabs__wrap) {
  border-bottom: 1px solid #f8f8f8;
  padding: .16rem 0;
  background-color: #fff;
}

:deep(.van-tab) {
  font-size: .4rem;
}

:deep(.van-tabs__content) {
  padding: .4rem .2667rem;
  background-color: #fff;
}

.workMateContent {
  &_box {
    &_btn {
      width: 1.3333rem;
      height: 1.3333rem;
      border-radius: 50%;
      background-color: $color-primary;
      position: fixed;
      bottom: 1.8667rem;
      right: .2667rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: .4rem;
      box-shadow: 0 0 10px rgba($color: $color-primary, $alpha: .5);
    }
  }
}
</style>